<template>
    <div ref="container" class="model-viewer"></div>
  </template>
  
  <script setup>
  
  import { ref, onMounted, onBeforeUnmount } from 'vue'
  import * as THREE from 'three'
  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
  
  const container = ref(null)
  let scene, camera, renderer, controls, model
  
  const init = () => {
    // 创建场景
    scene = new THREE.Scene()
    scene.background = new THREE.Color(0x00ff00)
  
    // 创建相机
    camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    )
    camera.position.z = 5
  
    // 创建渲染器
    renderer = new THREE.WebGLRenderer({ antialias: true })
    renderer.setSize(window.innerWidth, window.innerHeight)
    renderer.setPixelRatio(window.devicePixelRatio)
    container.value.appendChild(renderer.domElement)
  
    // 添加轨道控制器
    controls = new OrbitControls(camera, renderer.domElement)
    controls.enableDamping = true
    controls.dampingFactor = 0.05
  
    // 添加环境光
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
    scene.add(ambientLight)
  
    // 添加方向光
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
    directionalLight.position.set(0, 1, 0)
    scene.add(directionalLight)
  
    // 加载模型
    const loader = new GLTFLoader()
    loader.load(
    //'/test.glb', // 请确保将您的 GLB 文件放在 public 目录下
    'https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb',
      (gltf) => {
        model = gltf.scene
        scene.add(model)
        
        // 自动调整相机位置以适应模型
        const box = new THREE.Box3().setFromObject(model)
        const center = box.getCenter(new THREE.Vector3())
        const size = box.getSize(new THREE.Vector3())
        debugger;
        const maxDim = Math.max(size.x, size.y, size.z)
        const fov = camera.fov * (Math.PI / 180)
        let cameraZ = Math.abs(maxDim / Math.sin(fov / 2))
        
        camera.position.z = cameraZ * 1.5
        camera.lookAt(center)
        controls.target.copy(center)
      },
      (xhr) => {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded')
      },
      (error) => {
        console.error('模型加载出错:', error)
      }
    )
  
    // 动画循环
    const animate = () => {
      requestAnimationFrame(animate)
      controls.update()
      renderer.render(scene, camera)
    }
    animate()
  
    // 窗口大小调整
    window.addEventListener('resize', onWindowResize)
  }
  
  const onWindowResize = () => {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
  }
  
  onMounted(() => {
    init()
  })
  
  onBeforeUnmount(() => {
    window.removeEventListener('resize', onWindowResize)
    scene.remove(model)
    renderer.dispose()
  })
  </script>
  
  <style scoped>
  .model-viewer {
    width: 80%;
    height: 90vh;
    overflow: hidden;
  }
  </style> 